<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title th:text="${webAppName} + ' 登录'"></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="icon" th:href="@{/images/web-page.png}" sizes="any" type="image/png" />
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css">

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- 引入二维码 SDK -->
    <!-- 飞书扫描二维码登录指南：https://open.feishu.cn/document/common-capabilities/sso/web-application-sso/qr-sdk-documentation -->
    <script src="https://lf-package-cn.feishucdn.com/obj/feishu-static/lark/passport/qrcode/LarkSSOSDKWebQRCode-1.0.3.js"></script>
    <script th:inline="javascript">
        window.onload = function () {
            let feishuQrAuthPage = /*[[${feishuQrAuthPage}]]*/ '';

            var goto = feishuQrAuthPage;

            var QRLoginObj = QRLogin({
                id: "login_container",
                goto: `${goto}`,
                width: "320",
                height: "320",
                style: "display: inline-block; margin-left: auto; margin-right: auto;"
        });

            var handleMessage = function (event) {
                // 使用 matchOrigin 和 matchData 方法来判断 message 和来自的页面 url 是否合法
                if (QRLoginObj.matchOrigin(event.origin) && QRLoginObj.matchData(event.data)) {
                    var loginTmpCode = event.data.tmp_code;
                    // 在授权页面地址上拼接上参数 tmp_code，并跳转
                    window.location.href = `${goto}&tmp_code=${loginTmpCode}`;
                }
            };

            if (typeof window.addEventListener != 'undefined') {
                window.addEventListener('message', handleMessage, false);
            } else if (typeof window.attachEvent != 'undefined') {
                window.attachEvent('onmessage', handleMessage);
            }
        }

        function writeQR() {
            $("#qrLoginDiv").show();
            $("#defaultLoginDiv").hide();
        }

        function defaultLogin() {
            $("#qrLoginDiv").hide();
            $("#defaultLoginDiv").show();
        }

        function gotoFeishuAuthPage() {
            let feishuAuthPage = /*[[${feishuAuthUrl}]]*/ '';
            window.location.href = feishuAuthPage;
        }
    </script>
</head>
<body>
<div id="defaultLoginDiv">
    <h1 style="text-align: center;margin-top: 160px;">账号登录</h1>
    <div class="container" id="defaultLogin">
        <form action="#" th:action="@{/doLogin}" method="post">
            <div class="form-group">
                <label for="username">用户名:</label>
                <input type="text" class="form-control" id="username" name="username" required>
            </div>
            <div class="form-group">
                <label for="password">密码:</label>
                <input type="password" class="form-control" id="password" name="password" required>
            </div>
            <button type="submit" class="btn btn-primary" style="margin-top: 12px;width: 100%;">登录</button>
            <div th:if="${error}" class="error-message">
                <span th:text="${error}"></span>
            </div>
        </form>

        <!-- 飞书授权免登 -->
        <div style="margin-top: 24px;">
            <button class="btn btn-primary2" style="width: 100%;"
                    th:onclick="'gotoFeishuAuthPage()'">
                <img src="/images/feishu1.png" style="height: 16px; width: auto;" alt=""> 飞书登录
            </button>
        </div>

        <!-- 飞书扫码免登 -->
        <div style="margin-top: 24px;">
            <button class="btn btn-primary2" style="width: 100%;"
                    onclick="writeQR()">
                <img src="/images/feishu1.png" style="height: 16px; width: auto;" alt=""> 扫码登录
            </button>
        </div>

    </div>
</div>

<div id="qrLoginDiv" style="display:none;">
    <h1 style="text-align: center;margin-top: 160px;">扫码登录</h1>

    <div class="container" id="qrLogin" style="height: 480px;">
        <div id="login_container" style="text-align: center"></div>

        <div style="margin-top: 24px;">
            <button class="btn btn-primary2" style="width: 100%;"
                    onclick="defaultLogin()">
                账号登录
            </button>
        </div>
    </div>
</div>

<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
</body>
</html>